<template>
  <div class="Home">
    <div class="search">
      <van-search
        v-model="value"
        shape="round"
        background="transparent"
        placeholder="商品搜索共238款好物"
        @click-input="toSearch"
      />
    </div>
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="#E31D1A">
        <van-swipe-item v-for="(item, index) in banners" :key="index">
          <img :src="item.url" alt width="100%" height="172px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="icon">
      <ul>
        <li>
          <img src="../assets/icon_01.png" alt />
          <span>团购专区</span>
        </li>
        <li @click="toBrand">
          <img src="../assets/icon_02.png" alt />
          <span>品牌列表</span>
        </li>
        <li @click="toBrand">
          <img src="../assets/icon_03.png" alt />
          <span>新品上架</span>
        </li>
        <li>
          <img src="../assets/icon_04.png" alt />
          <span>活动有礼</span>
        </li>
      </ul>
    </div>
    <span class="title">新品推荐</span>
    <div class="goodslist">
      <div
        class="goodslist-item"
        v-for="(item, index) in newGoodsList"
        :key="index"
        @click.stop="toGoodsDetail(item.id)"
      >
        <img :src="item.picUrl" alt />
        <span>{{ item.name | ellipsis }}</span>
        <span>￥{{ item.retailPrice }}</span>
      </div>
    </div>
    <span class="title">人气推荐</span>
    <div class="hot">
      <div
        class="hot-item"
        v-for="(item, index) in hotGoodsList"
        :key="index"
        @click.stop="toGoodsDetail(item.id)"
      >
        <img :src="item.picUrl" alt />
        <span>{{ item.name | ellipsis }}</span>
        <span>{{ item.brief }}</span>
        <span>￥{{ item.retailPrice }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Search, Swipe, SwipeItem } from "vant";
import API from "@/utils/api.js";
export default {
  name: "Home",
  data() {
    return {
      value: "",
      banners: [],
      newGoodsList: [],
      hotGoodsList: [],
    };
  },
  created() {
    this.getHomeInfo();
  },
  methods: {
    getHomeInfo() {
      this.$get(API.GET_HOME_INFO).then((res) => {
        console.log(res.data);
        this.banners = res.data.banner;
        this.newGoodsList = res.data.newGoodsList;
        this.hotGoodsList = res.data.hotGoodsList;
      });
    },
    toSearch() {
      setTimeout(() => {
        this.$router.push({ path: "/search" });
      }, 500);
    },
    toGoodsDetail(id) {
      this.$router.push({ path: "/goodsdetail", query: { id: id } });
    },
    toBrand(){
       this.$router.push({ path: "/brandlist" })
    }
  },
  components: {
    [NavBar.name]: NavBar,
    [Search.name]: Search,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  filters: {
    ellipsis(value) {
      if (!value) return "";
      if (value.length > 10) {
        return value.slice(0, 10) + "...";
      }
      return value;
    },
  },
};
</script>

<style lang="less" scoped>
@margin: 0 auto;
@width: 90%;
.Home {
  margin-top: 46px;
  margin-bottom: 50px;
  position: relative;
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  color: #444;
  text-align: center;
  background: linear-gradient(to bottom, #ff6a6c 0%, #ffffff 10%);
}
.title {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
  margin-top: 24px;
  &:before,
  &:after {
    content: "";
    width: 50px;
    border-bottom: 1px solid #ff6a6c;
    margin: 0 16px;
  }
}
.my-swipe {
  width: @width + 5%;
  margin: @margin;
  border-radius: 14px;
}
.van-swipe-item {
  width: @width + 5%;
}
.icon {
  width: @width;
  margin: @margin;
  display: flex;
  flex-direction: row;
}
.icon ul li img {
  width: 40px;
  height: 40px;
}
.icon ul {
  width: @width + 5%;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
}
.icon ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.icon ul li span {
  color: rgb(150, 150, 150);
  margin-top: 6px;
}
.banner img {
  width: @width;
  margin: 12px auto;
  border-radius: 10px;
}
.goodslist {
  width: @width;
  margin: @margin;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.goodslist-item {
  display: flex;
  flex-direction: column;
}
.goodslist-item span:nth-child(3) {
  color: rgb(238, 74, 74);
  margin-top: 6px;
}
.goodslist img {
  width: 140px;
  height: 140px;
}
.hot {
  width: @width;
  margin: @margin;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.hot-item {
  display: flex;
  flex-direction: column;
}
.hot-item span:nth-child(3) {
  color: #969696;
  margin: 6px 0;
}
.hot-item span:nth-child(4) {
  color: rgb(238, 74, 74);
}
.hot-item img {
  width: 140px;
  height: 140px;
}
</style>